<template>
  <div class="about">
    <ViewScroll class="about-box">
    <!-- 顶部头像和信息  start -->
    <div class="about_info">
      <div class="aboutInfo_left">
        <div class="head_portrait">
          <img src="../../public/img_about/user.jpg" alt />
        </div>
      </div>
      <div class="aboutInfo_right">
        <div>
          <div class="about_name">
            <p>用户姓名</p>
          </div>
          <div class="about_address">
            <p>
              <span>我的收货地址</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 顶部头像和信息  end -->

    <!-- 我的订单 start -->
    <div class="order_info" v-for="(v,i) in about" :key="i" :class="`info${i}`">
      <div class="info_left">
        <div class="image_icon">
          <img :src="v.icon" alt />
        </div>
        <div class="title_icon">
          <span class="info_title">{{ v.title }}</span>
        </div>
      </div>
      <div class="info_right">
        <span v-show="v.title=='我的钱包'">快速提现</span>
        <i class="icon iconfont icon-right"></i>
      </div>
    </div>
    <!-- 我的订单 end -->
    <div class="icon_btn">
      <router-link class="quit_btn btn btn-default" :to="`/login`" tag="div">
        <span>退出登录</span>
      </router-link>
    </div>
    </ViewScroll>
  </div>
</template>
<script>
export default {
  data() {
    return {
      about: [
        {
          title: "我的订单",
          icon: require("../../public/img_about/order.png")
        },
        {
          title: "我的购物车",
          icon: require("../../public/img_about/shoppingCart.png")
        },
        {
          title: "我的拼团",
          icon: require("../../public/img_about/pieceTogether.png")
        },
        {
          title: "我的钱包",
          icon: require("../../public/img_about/wallet.png")
        },
        {
          title: "我的优惠券",
          icon: require("../../public/img_about/discountCoupon.png")
        },
        {
          title: "我收藏的商品",
          icon: require("../../public/img_about/collect.png")
        },
        {
          title: "我收藏的店铺",
          icon: require("../../public/img_about/shop.png")
        },
        {
          title: "消息通知",
          icon: require("../../public/img_about/message.png")
        },
        {
          title: "客服",
          icon: require("../../public/img_about/service.png")
        },
        {
          title: "意见反馈",
          icon: require("../../public/img_about/feedback.png")
        }
      ]
    };
  }
};
</script>
<style lang="less" scoped>
.about-box {
  position: absolute;
  top: 0rem;
  bottom: 0rem;
  left: 0rem;
  right: 0rem;
  // overflow-y: auto;
  overflow: hidden;
}
.image_icon {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  // border:1px solid red;
  overflow: hidden;
  margin-left: 50px;

  img {
    width: 100%;
  }
}
.info_title {
  padding-left: 20px;
}
.info_left {
  width: 70%;
  height: 100%;
  display: flex;
  // justify-content:
  align-items: center;
}
.info_right {
  width: 30%;
  height: 100%;
  padding-right: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  span {
    font-size: 16px;
    color: #999;
  }
}
.about {
  width: 100%;
  height: 100%;
  background-color: #efefef;
  position: absolute;
  top: 0px;
  .about_info {
    width: 100%;
    height: 180px;
    // border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    margin-bottom: 30px;
    .aboutInfo_left {
      width: 20%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .head_portrait {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        // border: 1px solid red;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
    }

    .aboutInfo_right {
      width: 80%;
      height: 100%;
      text-align: left;
      display: flex;
      align-items: center;
      .about_name {
        padding-left: 20px;
        // padding-bottom: 15px;
        width: 100%;
        font-weight: bold;
      }
      .about_address {
        padding-left: 20px;
        width: 100%;
        text-align: left;
        font-size: 16px;
      }
    }
  }
  .order_info {
    width: 100%;
    height: 85px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dedede;
  }
  .info0,
  .info6 {
    margin-bottom: 25px;
  }

  .icon_btn {
    width: 100%;
    height: 15vw;
    // border:1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    .quit_btn {
      width: 90%;
      height: 70%;
      // text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f34b70;
      color: white;
      // border:1px solid red;
    }
  }
}
</style>